<template>
    <div class="zh-examine-form-design" v-loading="loading.status" :element-loading-text="loading.txt">
        <div class="form-design clear">
            <div class="form-design-left fl">
                <el-button><i @click="checkStatus" class="el-icon-arrow-left"></i></el-button>
                {{title}}
            </div>
            <div class="form-design-right fr">
                <el-button @click="publish" type="primary">发布</el-button>
            </div>
            <div class="form-design-center clear">
                <span @click="changeTab('first')" :class="{pointer:true,active:currentStep=='first'}">基础设置</span>
                <span @click="changeTab('second')" :class="{pointer:true,active:currentStep=='second'}">表单设置</span>
                <span @click="changeTab('third')" :class="{pointer:true,active:currentStep=='third'}">流程设计</span>
            </div>
        </div>   

        <div class="form-design-main">
            <first v-show="currentStep=='first'" :examineModel="examineModel" ref="first"></first>    
            <second v-show="currentStep=='second'" :examineModel="examineModel" ref="second"></second>    
            <third v-show="currentStep=='third'" :examineModel="examineModel" ref="third"></third>    
        </div>  

        <!-- 发布 -->
        <el-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :before-close="turnExamineList"
            :title="'发布'"
            :visible.sync="successView"
            width="400px">
            <div class="success clear">
               <p>【{{examineName}}】发布成功，可以通过前台办公审批发起审批</p>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="turnExamineList" type="primary">确定</el-button>
            </div>
        </el-dialog>

        <!-- 提示 -->
        <el-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :title="'提示'"
            :visible.sync="reminderView"
            width="400px">
            <div class="reminder clear">
               <p>有修改的内容未发布，确认离开吗？</p>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="reminderView=false">取消</el-button>
                <el-button @click="$router.back()" type="primary">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/javascript">
    import first from './examine-form-design-first.vue'
    import second from './examine-form-design-second.vue'
    import third from './examine-form-design-third.vue'

    export default {
        data(){
            return {
                // 加载数据时显示的信息和加载动画
                loading: {
                    status: false,
                    txt: '正在发布表单模板...',
                },
                sesstion: null,   // html Dom
                home_header: null,   // html Dom
                main_content: null,   // html Dom
                home_footer: null,   // html Dom
                currentStep: 'first',   // 当前tab的值
                successView: false,   // 控制成功时的弹窗显隐
                reminderView: false,   // 控制提示的弹窗显隐
                examineModel: null,   // 需要编辑的审批模板id
                examineName: null,   // 保存时审批单的名字
            }
        },
        created(){
            if(this.$route.query.id!==undefined){
                this.getExamineModel(this.$route.query.id)
            }

        },
        mounted(){
            this.setStyle();
        },
        watch:{
            examineModel:{
                handler(newVal,oldVal){ 
                    if(newVal){
                        this.newForm = newVal.form_set.map(item=>item);
                    }
                },
                immediate:true
            }
        },
        beforeDestroy(){
            this.sesstion.remove('reset-sesstion');
            this.home_header.remove('hidden-aside');
            this.main_content.remove('reset-main');
            this.home_footer.remove('hidden-footer');
        },
        components:{
            first,
            second,
            third
        },
        methods:{
            // 获取要修改的模板信息
            getExamineModel(id){

                let success = (res=>{

                    var data = res.data;

                    this.examineModel = data;

                })
                let fail = ( data => {})
              
                this.$ajax.get('/api/examine/examineFormwork',{params:{id:id, user_id: this.$g.user_id},func:{success:success,fail:fail}})
            },
            // 检查有否修改，有修改弹窗提示，没有修改直接返回
            checkStatus(){
                let first,second,third,status;
                this.$children.forEach((item,idx)=>{
                    if(item.$refs.first){
                        first = item;
                    }

                    if(item.$refs.second){
                        second = item;
                    }

                    if(item.$refs.third){
                        third = item;
                    }
                })
                
                if(first){
                    status = first.checkStatus();
                }

                if(second){
                    status = second.checkStatus();
                }

                if(third){
                    status = third.checkStatus();
                }

                if(status){
                    this.$router.back();
                }else{
                    this.reminderView = true;
                }
            },
            changeTab(step){
                this.currentStep = step;
            },
            /**
             * 改变元素的样式
             */
            setStyle() {
                 // 隐藏侧边栏
                this.sesstion = document.querySelector('.zh-main>.el-container>.el-container').classList;
                this.sesstion.add('reset-sesstion');

                // 隐藏侧边栏
                this.home_header = document.querySelector('.zh-main>.el-container>.el-container>.el-aside').classList;
                this.home_header.add('hidden-aside');

                // 重置el-main样式
                this.main_content = document.querySelector('.zh-main>.el-container>.el-container>.el-main').classList;
                this.main_content.add('reset-main');   

                // 隐藏底部栏
                this.home_footer = document.querySelector('.zh-main>.el-container>.el-footer').classList;
                this.home_footer.add('hidden-footer');
            },
            // 点击发布时执行
            publish(){
                let first = this.$refs.first,
                    second = this.$refs.second,
                    third = this.$refs.third;

                // ----------------------------------- 检测first组件 -----------------------------------
                // firstValue为false时为验证失败，验证成功时返回一个对象
                let firstValue = first.submit();

                if(!firstValue){
                    this.$message.error('基础设置必填项未填');
                    this.currentStep = 'first';
                    return
                }


                // ----------------------------------- 检测second组件 -----------------------------------
                if(!second){
                    this.$message.error('你还没有进行表单设置');
                    this.currentStep = 'second';
                    return
                }

                // secondValue为false时为验证失败，验证成功时返回一个数组
                let secondValue = second.submit();

                if(!secondValue){
                    this.$message.error('表单设置页信息有误或者为空');
                    this.currentStep = 'second';
                    return
                }

 
                // ----------------------------------- 检测third组件 -----------------------------------
                if(!third){
                    this.$message.error('你还没有进行流程设计,若不设置则以默认值提交');
                    this.currentStep = 'third';
                    return
                }

                // thirdValuee为false时为验证失败，验证成功时返回一个对象
                let thirdValue = third.submit();
                
                // 给表单设置中新建的组件添加时间戳
                let timeStampID = Date.now();   // 统一时间戳id
                for(let i=0;i<secondValue.length;i++){
                    if(!secondValue[i].timeStampID){
                        secondValue[i].timeStampID = timeStampID;
                    }

                    if(secondValue[i].id==9){
                        for(let j=0;j<secondValue[i].detail.length;j++){
                            if(!secondValue[i].detail[j].timeStampID){
                                secondValue[i].detail[j].timeStampID = timeStampID;
                            }
                        }
                    }
                }

                // 声明一个对形象用于存放审批模板的数据
                let params = {...firstValue,form_set:JSON.stringify(secondValue),...thirdValue};

                // 新建模板或者按现有模板新建都走这里
                if(this.$route.query.id == undefined || this.$route.query.model == 'yes'){

                    // 显示加载动画
                    this.loading.status = true;
                    let success = (res=>{
                        // 隐藏加载动画
                        this.loading.status = false;

                        var data = res.data;

                        if(data){
                            this.examineName = first.name
                            this.successView = true;
                        }

                    })
                    let fail = ( data => {
                        this.$message.error('操作失败:'+data.msg)

                        // 隐藏加载动画
                        this.loading.status = false;
                    })

                    this.$ajax.post('/api/examine/examineFormwork',params,{func:{success:success,fail:fail}})

                }
                // 编辑审批模板走这里
                else if(this.$route.query.id != undefined && this.$route.query.model == 'no'){

                    params.id = this.$route.query.id;

                    // 显示加载动画
                    this.loading.status = true;
                    let success = (res=>{
                        // 隐藏加载动画
                        this.loading.status = false;

                        var data = res.data;

                        if(data){
                            this.examineName = first.name
                            this.successView = true;
                        }

                    })
                    let fail = ( data => {
                        this.$message.error('操作失败')

                        // 隐藏加载动画
                        this.loading.status = false;
                    })
                    
                    this.$ajax.put('/api/examine/examineFormwork',params,{func:{success:success,fail:fail}})

                }

            },
            // 跳转到审批列表页
            turnExamineList(){
                this.$router.back();
            },
        },
        computed:{
            title(){
                return (this.examineModel && this.$route.query.model == 'no') ? this.examineModel.name : '新建';
            },
        }
    }
</script>

<style lang="scss">
    // 重置session高度
    .zh-main>.el-container>.reset-sesstion{
        height:calc(100vh - 61px) !important;
    }

    // 隐藏侧边栏
    .zh-main>.el-container>.el-container>.hidden-aside{
        display:none
    }

    // 重置el-main样式
    .zh-main>.el-container>.el-container>.reset-main{
        // min-width:1720px;
        // max-width:2000px;
        padding:0 !important;
        height:100%;
        background: #EFFAFF;
        font-family: MicrosoftYaHei;
        .zh-common-title{
            display:none;
        }
        .zh-examine-form-design{
            height:100%;
            min-width:1720px;
            // max-width:2000px;
            .form-design{
                position:relative;
                height:50px;
                overflow:hidden;
                line-height:50px;
                background: #fff;
                border-bottom: 1px solid #EBEBEB;
                .form-design-left{
                    padding-left:18px;
                    .el-button{
                        margin:9px 0;
                        padding:0 20px;
                        border:0;
                        line-height:32px;
                        border-radius:4px;
                        span{
                            font-family: MicrosoftYaHei;
                            font-size: 14px;
                            color: #000000;
                            letter-spacing: 0;
                            .el-icon-arrow-left{
                                width:9px;
                                height:16px;
                            }
                        }
                    }
                }
                .form-design-right{
                    margin-right:34px;
                }
                .form-design-center{
                    position:absolute;
                    top:0;
                    left:50%;
                    transform:translateX(-50%);
                    height:50px;
                    font-size: 14px;
                    color: #666666;
                    letter-spacing: 0;
                    overflow:hidden;
                    >span{
                        float:left;
                        margin:0 40px;
                        box-sizing:border-box;
                        height:50px;
                        line-height:50px;
                        &:hover{
                            color: #348EFC;
                        }
                        &.active{
                            color: #348EFC;
                            border-bottom:3px solid #348EFC;
                        }
                    }
                }
            }

            .form-design-main{
                height:766px;
                height:calc(100% - 51px);
            }
        }
    }

    // 隐藏底部栏
    .zh-main>.el-container>.hidden-footer{
        display:none
    }

    .zh-examine-form-design{
        // 弹窗样式
        .el-dialog__wrapper{
            .el-dialog{
                // 发布成功的弹窗
                .success{
                    >p{
                        padding:20px 13px;
                        line-height:28px;
                    }
                }

                // 提示弹窗
                .reminder{
                    padding:20px 13px;
                    text-align:center;
                }
            }
        }
        
        .pointer{
            cursor:pointer;
        }

        p{
            margin:0;
            font-family: MicrosoftYaHei;
            font-size: 14px;
            color: #000000;
            letter-spacing: 0;
        }
        
    }
</style>